<template>
    <div class="index">
        <!-- 头部 -->
        <Header></Header>
        <div class="index-mid">
            <div class="index-mid-left-top">
                <div class="index-info-left">
                    <Status :detail="formWanzhou.detail"></Status>
                </div>
            </div>
            <!-- <div class="index-mid-left-mid">
                <div class="index-info-left">
                    <Data></Data>
                </div>
            </div> -->
            <div class="index-mid-left-bottom">
                <div class="index-info-left">
                    <Report></Report>
                </div>
            </div>
            <div class="index-mid-center-left-top">
                <div class="index-info-center-left">
                    <CivilUse></CivilUse>
                    <Special></Special>
                    <PoliceUse></PoliceUse>
                </div>
            </div>
            <!-- <div class="index-mid-center-left-bottom">
                <div class="index-info-center-left">
                    <Log></Log>
                </div>
            </div> -->
            <!-- <TianMap></TianMap> -->
            <GaodeMap ref="mapRef" :mapType="mapType" :spectList="formSpect.list"  
            :planeList="formPlane.list" :boatList="formBoat.list"
            :deviceSn="formSpectTrack.data.deviceSn" :trackList="formSpectTrack.list"
                :deviceList="formDevice.list" :controlAreaList="formArea.list" @showDetail="showDetail"
                @showDevice="showDevice">
            </GaodeMap>
            <div class="index-mid-top">
                <div class="reserve-type-box">
                    <div v-for="(item, index) in (reserveTypeList as any)" :key="index"
                        :class="`${local.reserveType == item.id ? 'reserve-active' : ''}`"
                        @click="changeReserveType(item)">
                        <img alt="" :src="`${local.reserveType == item.id ? item.iconActive : item.icon}`" />
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <div class="index-mid-bottom">
                <div class="map-control">
                    <div class="map-control-top">
                        <div class="statellite" :class="{ active: mapType == 'satellite' }">
                            <a-button type="text" @click="statellite">
                                <div class="img"></div>
                                <!-- <p>{{ $t('index.index.60zdeeti3940') }}</p> -->
                            </a-button>
                        </div>
                        <div class="distance">
                            <a-button type="text" @click="distance">
                                <div class="img"></div>
                                <!-- <p>{{ $t('index.index.60zdeeti6mw0') }}</p> -->
                            </a-button>
                        </div>
                    </div>
                    <div class="map-control-mid">
                        <div class="back-center">
                            <a-button type="text" @click="backCenter">
                                <div class="img"></div>
                            </a-button>
                        </div>
                    </div>
                    <div class="map-control-bottom">
                        <div class="magnify">
                            <a-button type="text" @click="magnify">
                                <div class="img"></div>
                            </a-button>
                        </div>
                        <div class="lessen">
                            <a-button type="text" @click="lessen">
                                <div class="img"></div>
                            </a-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="index-mid-center-right-top">
                <div class="index-info-right">
                    <!-- 无人机事件部分 -->
                    <Spect v-if="local.reserveType === 0" ref="spectRef" v-model:deviceSn="formSpectTrack.data.deviceSn"
                        @panTo="panTo" :list="formSpect.list">
                    </Spect>
                    <FiveGASpect v-else ref="spectRef" v-model:deviceSn="formSpectTrack.data.deviceSn"
                        @panTo="panTo" :list="formSpect.list">
                    </FiveGASpect>
                </div>
            </div>
            <!-- <div class="index-mid-center-right-bottom">
                <div class="index-info-right">
                    <Device @scanPanTo="scanPanTo" :list="formDevice.list"></Device>
                </div>
            </div> -->
            <div class="index-mid-right-top">
                <div class="index-info-center-right">
                    <!-- 设备部分 -->
                    <Device @load="getDeviceData" v-if="local.reserveType === 0" ref="deviceRef" @scanPanTo="scanPanTo"
                        :list="formDevice.list" v-model:data="formDevice.data" :count="formDevice.count">
                    </Device>
                    <FiveGADevice @load="getDeviceData" v-else ref="fiveGAdeviceRef" @scanPanTo="scanPanTo" 
                      :list="formDevice.list"  v-model:data="formDevice.data" :count="formDevice.count">
                    </FiveGADevice>
                    <!-- <Find :detail="formWanzhou.detail"></Find> -->
                </div>
            </div>
            <!-- <div class="index-mid-right-mid">
                <div class="index-info-center-right">
                    <WhiteList></WhiteList>
                </div>
            </div> -->
            <div class="index-mid-right-bottom">
                <div class="index-info-center-right">
                    <IntradayData v-if="local.reserveType === 0"></IntradayData>
                    <FiveGAIntradayData v-else></FiveGAIntradayData>
                </div>
            </div>
        </div>
        <!-- <div class="index-mid"></div> -->
    </div>
</template>

<script lang='ts' setup>
import { DrawLine } from '@antv/l7-draw';
import Spect from './components/spect.vue';
import FiveGASpect from './components/fiveGASpect.vue';
import { ref } from 'vue';
import { apiSpectInfo, apiPlaneList,apiBoatList } from '@/api/index'
import { apiRiskList } from '@/api/risk'
import remoteId from '@/assets/images/reserve1.png';
import fiveGA from '@/assets/images/reserve2.png';
import remoteIdActive from '@/assets/images/reserve1-active.png';
import fiveGAActive from '@/assets/images/reserve2-active.png';
// import dayjs from 'dayjs';
import { apiDeviceList, apifiveGADeviceList } from '@/api/device'
const Header = defineAsyncComponent(() => import('./components/header.vue'))
// const Log = defineAsyncComponent(() => import('./components/log.vue'))
// const Data = defineAsyncComponent(() => import('./components/data.vue'))
const Status = defineAsyncComponent(() => import('./components/status.vue'))
// const Modal = defineAsyncComponent(() => import('./components/modal.vue'))
const Report = defineAsyncComponent(() => import('./components/report.vue'))
const IntradayData = defineAsyncComponent(() => import('./components/intradayData.vue'))
const FiveGAIntradayData = defineAsyncComponent(() => import('./components/fiveGAIntradayData.vue'))
const Special = defineAsyncComponent(() => import('./components/special.vue'))
const CivilUse = defineAsyncComponent(() => import('./components/civilUse.vue'))
const PoliceUse = defineAsyncComponent(() => import('./components/policeUse.vue'))
// const Find = defineAsyncComponent(() => import('./components/find.vue'))
// const WhiteList = defineAsyncComponent(() => import('./components/whiteList.vue'))
// const Spect = defineAsyncComponent(() => import('./components/spect.vue'))
const Device = defineAsyncComponent(() => import('./components/device.vue'))
const FiveGADevice = defineAsyncComponent(() => import('./components/fiveGADevice.vue'))
const GaodeMap = defineAsyncComponent(() => import('./components/gaodeMap.vue'))
//const TianMap = defineAsyncComponent(()=>import('./components/tianMap.vue'))
const mapRef = ref()
const spectRef = ref()
const deviceRef = ref()
const fiveGAdeviceRef = ref()
const mapType = ref('satellite')
// const mapType = ref('default')
const local = useLocal()
// 无人机点击事件接收索引
// const spectIndexEve = (val) => {
//    console.log(val)
// }
// const formReserve = reactive({
//     active: 0,
// } as any)
const formPlane = reactive({
    active: 0,
    data: {
        page: 1,
        pageSize: 300,
        // uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    list: [] as any,
    count: 0
})
const formBoat = reactive({
    active: 0,
    data: {
        page: 1,
        pageSize: 300,
        // uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    list:[] as any,
    count: 0
})
const formSpect = reactive({
    active: 0,
    data: {
        status: 1,
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    list: [] as any,
    count: 0
})
const formSpectTrack = reactive({
    active: 0,
    data: {
        deviceSn: '',
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
    },
    loading: false,
    list: [] as any,
})
const formDevice = reactive({
    data: {
        status: 0,
        page: 1,
        pageSize: 999,
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    disabled: false,
    list: [] as any,
    count: 0
})
const formArea = reactive({
    data: {
        status: 0,
        page: 1,
        pageSize: 40,
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    list: [] as any,
    count: 0
})
const formWanzhou = reactive({
    data: {
        status: 0,
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    detail: {
        airspaceStatus: {
            sum: 96,
            declareNum: 93,
            unDeclareNum: 3
        },
        find: {
            uavNum: 123,
            operatorNum: 124
        },
        deviceStatus: {
            status: {
                sum: 200,
                onlineNum: 145,
                offlineNum: 55
            },
            type: {
                min: 6,
                light: 183,
                small: 11,
                middle: 0,
                large: 0
            }
        }
    } as any,
    count: 0
})
// function generateShortId(length = 8) {
//   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
//   let result = '';
//   const charactersLength = characters.length;

//   for (let i = 0; i < length; i++) {
//     result += characters.charAt(Math.floor(Math.random() * charactersLength));
//   }

//   return result;
// }
// 接收类型列表 
const reserveTypeList = [
    {
        id: 0,
        name: '远程识别',
        icon: remoteId,
        iconActive: remoteIdActive
    },
    {
        id: 1,
        name: '5G-A',
        icon: fiveGA,
        iconActive: fiveGAActive
    }
]
// console.log(reserveTypeList)
// 无人机信息列表
const getSpectData = async () => {
    let reserveType:any = local.reserveType;
    const { code, data } = reserveType === 0 ? (await apiSpectInfo({
        ...formSpect.data
    })) : (await apiFiveGASpectInfo({
        ...formSpect.data,
    }))
    if (code != 200) return;
    if(reserveType != local.reserveType) return;
    let newList:any = reserveType == 0 ? data.list.map((item: any) => {
        return {
            ...item,
            "reserveType": 0
        }
    }) : data.list.map((item: any) => {
        return {
            ...item,
            "reserveType": 1,
            "manufacturer": "",
            "receiverMac": "",
            "uid": 0,
            "whiteUav": {
                "uavNum": "",
                "customerName": "",
                "mobile": "",
                "address": "",
                "idCardNum": "",
                "suffix": '',
                "color": ''
            },
            "uavBasic": {
                id: item.objectId,
                "uavType": 1,
                "IDType": 1
            },
            "uavLocation": {
                lat: item.latitude,
                lon: item.longitude,
                "alit": 0,
                "direc": 0,
                "status": 1,
                "speedH": item.speed,
                "speedV": 0,
                "height": item.altitude,
                "height_over": 0,
                "hori_acc": 0,
                "vert_acc": 0,
                "speed_acc": 0,
                "altitude":item.altitude
            },
            "uavOperatorBasic": {
                "ID": 0,
                "type": 0
            },
            "uavOperatorInfo": {
                "Location Type": 0,
                "alit": 0,
                lat: 0,
                lon: 0,
                "area_count": 0,
                "area_rad": 0,
                "coordinate_type": 0,
                "area_ceil": 0,
                "area_floor": 0,
                "classification": 0,
                "category": 0,
                "class": 0,
                "Timestamp": "2018-12-31 00:00:00"
            },
            "status": 0,
            "createTime": item.time,
            "rssi": 0
        }
    })
    // 2维无人机图标
    // newList = newList.filter((item: any) => (!(formSpect.list.find((i: any) => ((i.uavLocation.lon == item.uavLocation.lon) && (i.uavLocation.lat == item.uavLocation.lat) && (i.uavOperatorInfo.lon == item.uavOperatorInfo.lon) && (i.uavOperatorInfo.lat == item.uavOperatorInfo.lat))))))
    // 3维无人机图标
    newList = reserveType == 0 ? 
    newList.filter((item: any) => (!(formSpect.list.find((i: any) => ((i.uavLocation.lon == item.uavLocation.lon) && (i.uavLocation.lat == item.uavLocation.lat) && (i.uavOperatorInfo.lon == item.uavOperatorInfo.lon) && (i.uavOperatorInfo.lat == item.uavOperatorInfo.lat)))))):
    newList.filter((item: any) => (!(formSpect.list.find((i: any) => ((i.uavLocation.lon == item.uavLocation.lon) && (i.uavLocation.lat == item.uavLocation.lat))))))
    // console.log(formSpectTrack.data.deviceSn,formSpectTrack.list,newList)
    // formSpect.list = [
    //     {
    //         "online": 0,
    //         "manufacturer": "",
    //         "receiverMac": "",
    //         "uid": 0,
    //         "whiteUav": {
    //             "uavNum": "渝A361523F1",
    //             "customerName": "赵*鹏",
    //             "mobile": "177777777",
    //             "address": "xx省xx市xx区xx街道xx号",
    //             "idCardNum": "500101200007285210",
    //             "suffix": '个人',
    //             "color": '#2979ff'
    //         },
    //         "uavBasic": {
    //             ID: '1581F4GCPT0000000016',
    //             "uavType": 1,
    //             "IDType": 1
    //         },
    //         "uavLocation": {
    //             lat: 39.904178,
    //             lon: 116.407386,
    //             "alit": 0,
    //             "direc": 0,
    //             "status": 1,
    //             "speedH": 0,
    //             "speedV": 0,
    //             "height": 0,
    //             "height_over": 0,
    //             "hori_acc": 0,
    //             "vert_acc": 0,
    //             "speed_acc": 0
    //         },
    //         "uavOperatorBasic": {
    //             "ID": 0,
    //             "type": 0
    //         },
    //         "uavOperatorInfo": {
    //             "Location Type": 0,
    //             "alit": 0,
    //             lat: 39.904379,
    //             lon: 116.407386,
    //             "area_count": 0,
    //             "area_rad": 0,
    //             "coordinate_type": 0,
    //             "area_ceil": 0,
    //             "area_floor": 0,
    //             "classification": 0,
    //             "category": 0,
    //             "class": 0,
    //             "Timestamp": "2018-12-31 00:00:00"
    //         },
    //         "status": 0,
    //         "createTime": 0,
    //         "rssi": 0
    //     }, {
    //         "online": 0,
    //         "manufacturer": "",
    //         "receiverMac": "",
    //         "uid": 0,
    //         "whiteUav": {
    //             "uavNum": "",
    //             "customerName": "",
    //             "mobile": "",
    //             "address": "",
    //             "idCardNum": "",
    //             "suffix": '',
    //             "color": '#00BFFF'
    //         },
    //         "uavBasic": {
    //             ID: '1581F4GCPT0000000017',
    //             "uavType": 1,
    //             "IDType": 1
    //         },
    //         "uavLocation": {
    //             lat: 39.905179,
    //             lon: 116.417387,
    //             "alit": 0,
    //             "direc": 0,
    //             "status": 1,
    //             "speedH": 0,
    //             "speedV": 0,
    //             "height": 0,
    //             "height_over": 0,
    //             "hori_acc": 0,
    //             "vert_acc": 0,
    //             "speed_acc": 0
    //         },
    //         "uavOperatorBasic": {
    //             "ID": 0,
    //             "type": 0
    //         },
    //         "uavOperatorInfo": {
    //             "Location Type": 0,
    //             "alit": 0,
    //             lat: 39.904279,
    //             lon: 116.407386,
    //             "area_count": 0,
    //             "area_rad": 0,
    //             "coordinate_type": 0,
    //             "area_ceil": 0,
    //             "area_floor": 0,
    //             "classification": 0,
    //             "category": 0,
    //             "class": 0,
    //             "Timestamp": "2018-12-31 00:00:00"
    //         },
    //         "status": 0,
    //         "createTime": 0,
    //         "rssi": 0
    //     }
    // ]

    // return;


    // data.list = data.list.map((item:any)=>{
    //     item.uavBasic.id = generateShortId(18)
    //     return item
    // })
    // 与原本无人机列表对比的数据
    let arr = cloneDeep(formSpect.list)
    // *过滤掉已经离线并且本次也没上报的
    arr = arr.filter((item: any) => (item?.online < 45) || (newList.find((i: any) => i.uavBasic.id == item.uavBasic.id))).map((item: any) => {
        item.online = newList.find((i: any) => i.uavBasic.id == item.uavBasic.id) ? 0 : (item.online + 1)
        return item
    })
    if (!(arr.find((item: any) => formSpectTrack.data.deviceSn == item.uavBasic.id))) {
        formSpectTrack.list = []
    }
    newList.forEach((item: any) => {
        if (formSpectTrack.data.deviceSn == item.uavBasic.id) {
            // console.log(formSpectTrack.data.deviceSn,item.uavBasic.id,formSpectTrack.list)
            // let lnglat = useGenerateRandomLatLonWithinDistance(formSpectTrack.list[formSpectTrack.list.length - 1],10)
            // item.uavLocation.lon = lnglat[0]
            // item.uavLocation.lat = lnglat[1]
            let latest = formSpectTrack?.list[formSpectTrack.list.length - 1]
            if (!item.uavLocation?.lon || !item.uavLocation?.lat) return;
            // 2维轨迹
            // if ((latest[0] == item.uavLocation?.lon) && (latest[1] == item.uavLocation?.lat)) return;
            // 3维轨迹
            if ((latest?.uavLocation?.lon == item.uavLocation?.lon) && (latest?.uavLocation?.lat == item.uavLocation?.lat)) return;
            // 2维轨迹
            // formSpectTrack.list = [
            //     ...formSpectTrack.list,
            //     [item.uavLocation?.lon, item.uavLocation?.lat]
            // ]
            formSpectTrack.data.deviceSn == item.uavBasic.id
            formSpectTrack.list = !formSpectTrack.list?[item]:[...formSpectTrack.list,item]
        }
        let index = arr.findIndex((i: any) => item.uavBasic.id == i.uavBasic.id)
        if (index == -1) {
            arr.unshift({
                ...item,
                online: 0
            })
        } else {
            arr[index] = {
                ...item,
                online: 0
            }
        }
    })
    formSpect.list = arr
}
const changeReserveType = (item: any) => {
    if(local.reserveType == item.id) return;
    local.reserveType = item.id
    formSpect.list = []
    formDevice.list = []
    formSpectTrack.list = []
    getDeviceData()
    getSpectData()
}


//设备列表
// 发送请求的逻辑
const getDeviceData = async () => {
    // refresh=false
    // if(refresh){
    //     formDevice.disabled = false
    //     formDevice.data.page = 1
    //     formDevice.list = []
    // }
    // if(formDevice.disabled) return;
    let reserveType:any = local.reserveType;
    const { code, data } = reserveType === 0 ? (await apiDeviceList({
        ...formDevice.data
    })) : (await apifiveGADeviceList({
        ...formDevice.data
    }))
    if (code != 200) return;
    if(reserveType != local.reserveType) return;
    formDevice.count = data.total
    let newList = reserveType == 0 ? data.list.map((item: any) => {
        return {
            ...item,
            "reserveType": 0
        }
    }) : data.list.map((item: any, index: any) => {
        return {
            ...item,
            "id": item.deviceId || ('id' + index),
            "name": item.deviceName || ('name' + index),
            "radius": 1300,
            "point": `${item.deviceLongitude},${item.deviceLatitude}`,
            "address": "",
            "oemSn": "",
            "alias": "",
            "type": item.deviceType,
            "groupId": 0,
            "groupName": "",
            "ip": "",
            "province": "",
            "city": "",
            "district": "",
            "provinceId": 0,
            "cityId": 0,
            "districtId": 0,
            "uid": 0,
            "status": item.workState,
            "mac": "",
            "reserveType": 1
        }
    })
    let arr = [...newList.filter((item: any) => item.id == 10), ...newList.filter((item: any) => item.id != 10)]
    if (arr.length && !formDevice.list.length) {
        // 发送请求的逻辑
        nextTick(() => {
            scanPanTo(arr[0].point.split(',').map((item: any) => Number(item)), arr[0].radius, arr[0].status, arr[0].id)
        });
    }
    if (formDevice.list.map((item: any) => `${item.id}|${item.status}|${item.radius}|${item.point}`).join() == arr.map((item: any) => `${item.id}|${item.status}|${item.radius}|${item.point}`).join()) return;    
    formDevice.list = arr
    // formDevice.list = [...formDevice.list,...arr]
    // if(data.list.length < formDevice.data.pageSize) return formDevice.disabled = true
    // formDevice.data.page++
}
// *飞机列表
const getPlaneData = async () => {
    formPlane.loading = true
    const { code, data } = await apiPlaneList({
        ...formPlane.data
    })
    formPlane.loading = false
    if (code != 200) return;
    formPlane.list = data.List
    formPlane.count = data.total
}
// *船舶列表
const getBoatData = async () => {
    formBoat.loading = true
    const { code, data } = await apiBoatList({
        ...formBoat.data
    })
    formBoat.loading = false
    if (code != 200) return;
    formBoat.list = data.List
    formBoat.count = data.total
}
// *风控区域管理列表
const getAreaData = async () => {
    formArea.loading = true
    const { code, data } = await apiRiskList({
        ...formArea.data
    })
    formArea.loading = false
    if (code != 200) return;
    formArea.list = data.list
    formArea.count = data.total
}
let num = 0
let timer: any
onBeforeMount(async () => {
    await getSpectData()
    getPlaneData()
    getBoatData()
    getAreaData() // *调用风控区域管理列表
    // getWanzhouData() // *万州相关接口
    getDeviceData()
    local.getdroneOPeratorList()
    timer = setInterval(() => {
        getSpectData()
        num++
        if (num >= 3) {
            local.getdroneOPeratorList()
            getDeviceData()
            num = 0
        }
    }, 1000)
})
onBeforeUnmount(() => {
    clearInterval(timer)
    timer = null
})
// 地图控件
// 地图控件部分
// 切换卫星模式
const statellite = () => {
    mapType.value = mapType.value == 'satellite' ? 'default' : 'satellite'
}
// 测距
const distance = () => {
    const drawLine = new DrawLine(mapRef.value?.distance(), {
        distanceOptions: {},
        style: {
            point: {
                options: {
                    zIndex: 10,
                }
            },
            line: {
                options: {
                    zIndex: 10,
                }
            }
        }
    });
    drawLine.enable();
}
// 回到中心点
const backCenter = () => {
    mapRef.value?.backCenter();
}
// 地图放大
const magnify = () => {
    mapRef.value?.magnify();
}
// 地图缩小
const lessen = () => {
    mapRef.value?.lessen();
}
// type 1无人机定位 2飞手定位
const panTo = (item: any,type=1) => {
    if (type == 2) return mapRef.value?.panTo([item.uavLocation.lon, item.uavLocation.lat])
    if (formSpectTrack.data.deviceSn == item.uavBasic.id) {
        formSpectTrack.data.deviceSn = ''
        formSpectTrack.list = []
        return
    }
    formSpectTrack.data.deviceSn = item.uavBasic.id
    formSpectTrack.list = [item] // 2维轨迹
    mapRef.value?.panTo([item.uavLocation.lon, item.uavLocation.lat])
}
const scanPanTo = (lngLat: any, radius: any, status: any, id: any) => {
    mapRef.value?.scanPanTo(lngLat, false, radius, status, id)
}
const showDetail = (e: any) => {
    spectRef.value?.showDetail(e)
}
const showDevice = (e: any) => {
    // console.log('index点击设备',e)
    deviceRef.value?.showDevice(e)
}
</script>

<style scoped lang="less">
.index {
    width: 100vw;
    height: 100vh;
    background-color: #b5b5b5;
    display: flex;
    flex-direction: column;

    .index-mid {
        position: relative;
        flex: 1;

        .index-mid-left-top {
            // height: 100%;
            position: absolute;
            top: 10px;
            left: 10px;
            display: flex;
            align-items: center;

            .index-info-left {
                // width: 408px;
                // height: 100%;
                // height: 350px;
                // background-color: rgba(10, 16, 36, .9);
                z-index: 999;
                transition: width 0.3s;

                .inner {
                    width: 408px;
                    padding: 20px;
                }
            }

            .left-button {
                width: 20px;
                height: 20px;
                z-index: 999;

                img {
                    width: 100%;
                }
            }

        }
        .index-mid-left-bottom {
            // height: 100%;
            position: absolute;
            bottom: 10px;
            left: 10px;
            display: flex;
            align-items: center;

            .index-info-left {
                // width: 408px;
                // height: 100%;
                // background-color: rgba(10, 16, 36, .9);
                z-index: 999;
                transition: width 0.3s;

                .inner {
                    width: 408px;
                    padding: 20px;
                }
            }

            .left-button {
                width: 20px;
                height: 20px;
                z-index: 999;

                img {
                    width: 100%;
                }
            }

        }

        .index-mid-center-left-top {
            // height: 100%;
            position: absolute;
            top: 10px;
            left: 310px;
            display: flex;
            align-items: center;
            z-index: 999;

            .index-info-center-left {
                z-index: 999;

                .index-info-left {
                    // width: 408px;
                    // height: 100%;
                    // background-color: rgba(10, 16, 36, .9);
                    transition: width 0.3s;

                    .inner {
                        width: 408px;
                        padding: 20px;
                    }
                }

                .left-button {
                    width: 20px;
                    height: 20px;
                    z-index: 999;

                    img {
                        width: 100%;
                    }
                }
            }

        }

        .index-mid-center-left-bottom {
            position: absolute;
            bottom: 10px;
            left: 320px;
            display: flex;
            align-items: center;
            z-index: 999;

            .index-info-center-left {
                z-index: 999;

                .index-info-left {
                    // width: 408px;
                    // height: 100%;
                    // background-color: rgba(10, 16, 36, .9);
                    transition: width 0.3s;

                    .inner {
                        width: 408px;
                        padding: 20px;
                    }
                }

                .left-button {
                    width: 20px;
                    height: 20px;
                    z-index: 999;

                    img {
                        width: 100%;
                    }
                }
            }

        }

        .index-mid-top {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: right;
            z-index: 10000;

            .reserve-type-box {
                display: flex;
                // width: 302px;
                height: 58px;
                opacity: 0.8;
                border-radius: 34px;
                background: rgba(11, 22, 79, 1);
                align-items: center;
                justify-content: space-around;
                padding: 0 15px;

                >div {
                    // width: 136px;
                    height: 46px;
                    padding: 0 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-image: url('@/assets/images/reserve-wanzhou-botton.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    background-position: center;
                    color: rgba(112, 112, 112, 1);
                    font-size: 24px;
                    font-weight: 400;
                    font-family: YouSheBiaoTiHei;
                    letter-spacing: 5px;

                    img {
                        margin-right: 10px;
                        width: 8px;
                    }
                }
                >div:first-child{
                    margin-right: 15px;
                }

                .reserve-active {
                    // width: 136px;
                    height: 46px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-image: url('@/assets/images/reserve-wanzhou-botton-active.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    background-position: center;
                    color: rgba(112, 112, 112, 1);
                    color: #fff;
                }

            }

        }

        .index-mid-bottom {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: right;
            z-index: 10000;

            .map-control {
                display: flex;
                // flex-direction: column;
                // width: 40px;
                z-index: 999;
                margin-right: 20px;
                gap: 10px;

                >div {
                    // margin-bottom: 20px;
                    display: flex;
                    background: rgba(15, 19, 41, 0.85);
                    border: 1px solid rgba(66, 129, 255, 1);
                    border-radius: 3px;

                    >div {
                        width: 40px;
                        margin: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 23px;
                            height: 23px;
                        }

                        p {
                            padding: 5px 0;
                        }
                    }
                }

                .statellite,
                .magnify {
                    border-right: 1px dashed rgba(255, 255, 255, 1);
                    padding-right: 10px;
                    color: #fff;
                    font-size: 12px;
                }

                .statellite,
                .distance,
                .back-center,
                .magnify,
                .lessen {
                    .img {
                        width: 23px;
                        height: 23px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }

                .statellite {
                    .img {
                        background-image: url('@/assets/icons/icon_wxdt_normal_@2x.png');
                    }
                }

                .active {
                    .img {
                        background-image: url('@/assets/icons/icon_wxdt_selected_@2x.png');
                    }

                    :deep(.arco-btn-text) {
                        p {
                            color: rgba(36, 189, 255, 1);
                            font-size: 12px;
                        }
                    }
                }

                .distance {
                    margin-left: 0;
                    width: 30px;

                    .img {
                        background-image: url('@/assets/icons/icon_cj_normal_@2x.png');
                    }

                    :deep(.arco-btn-text) {
                        p {
                            color: #fff;
                            font-size: 12px;
                        }
                    }
                }

                .distance:hover {
                    .img {
                        background-image: url('@/assets/icons/icon_cj_selected_@2x.png');
                    }

                    :deep(.arco-btn-text) {
                        p {
                            color: rgba(36, 189, 255, 1);
                            font-size: 12px;
                        }
                    }
                }

                .back-center {
                    width: 30px;

                    .img {
                        background-image: url('@/assets/icons/icon_dw_normal_@2x.png');
                    }

                    .img:hover {
                        background-image: url('@/assets/icons/icon_dw_pressed_@2x.png');
                    }
                }

                .magnify {
                    .img {
                        background-image: url('@/assets/icons/icon_add_normal_@2x.png');
                    }

                    .img:hover {
                        background-image: url('@/assets/icons/icon_add_pressed_@2x.png');
                    }
                }

                .lessen {
                    margin-left: 0;
                    width: 30px;

                    .img {
                        background-image: url('@/assets/icons/icon_reduce_normal_@2x.png');
                    }

                    .img:hover {
                        background-image: url('@/assets/icons/icon_reduce_pressed_@2x.png');
                    }
                }

                :deep(.arco-btn) {
                    display: unset;
                    color: unset;
                }

                :deep(.arco-btn:hover) {
                    background-color: unset;
                }

                :deep(.arco-btn-size-medium) {
                    height: unset;
                }
            }
        }

        .index-mid-center-right-top {
            // height: 100%;
            position: absolute;
            top: 10px;
            right: 310px;
            display: flex;
            align-items: center;
            justify-content: right;
            z-index: 999;

            .index-info-right {
                z-index: 999;
                // width: 408px;
                height: 100%;
                // background-color: rgba(10, 16, 36, .9);
                transition: width 0.3s;
            }
        }

        .index-mid-center-right-bottom {
            // height: 100%;
            position: absolute;
            bottom: 10px;
            right: 325px;
            display: flex;
            align-items: center;
            justify-content: right;
            z-index: 999;

            .index-info-right {
                z-index: 999;
                // width: 408px;
                height: 100%;
                // background-color: rgba(10, 16, 36, .9);
                transition: width 0.3s;
            }
        }

        .index-mid-right-top {
            // height: 100%;
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            align-items: center;
            justify-content: right;
            z-index: 999;

            .index-info-right {
                z-index: 999;
                // width: 408px;
                height: 100%;
                // background-color: rgba(10, 16, 36, .9);
                z-index: 999;
                transition: width 0.3s;
            }
        }

        .index-mid-right-mid {
            // height: 100%;
            position: absolute;
            top: 258.09px;
            right: 10px;
            display: flex;
            align-items: center;
            justify-content: right;
            z-index: 999;

            .index-info-right {
                z-index: 999;
                // width: 408px;
                height: 100%;
                // background-color: rgba(10, 16, 36, .9);
                transition: width 0.3s;
            }
        }

        .index-mid-right-bottom {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            align-items: end;
            justify-content: right;
            z-index: 999;

            .right-button {
                width: 20px;
                height: 20px;
                z-index: 999;

                img {
                    width: 100%;
                }
            }

            .index-info-right {

                height: 100%;
                // background-color: rgba(10, 16, 36, .9);
                z-index: 999;
                transition: width 0.3s;
            }
        }
    }
}

.modal-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    width: 380px;
    height: 320px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('@/assets/images/modal-wanzhou-dangerBg.png');

    .title {
        display: flex;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;

        >.img {
            img {
                width: 36px;
                height: 38px;
            }
        }

        >.title-info {
            margin-bottom: 10px;
        }
    }

    .info {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;

        >div {
            display: flex;
        }
    }

    .botton {
        width: 140px;
        height: 40px;
        opacity: 1;
        border-radius: 4px;
        background: rgba(255, 31, 31, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2px 8px 2px 8px;
        font-size: 16px;
        font-weight: 700;
        margin-top: 20px;
    }
}
</style>